<template>
    <div>
        <a-form :form="search_form" layout="inline" @submit.prevent="handle_search" :style="{marginBottom: '20px'}">
            <a-form-item label="开始时间">
                <a-range-picker v-decorator="['created_at', {
                    rules: [{ type: 'array', required: false, message: 'Please select time!' }],
                }]" style="width: 240px;"/>
            </a-form-item>
            <a-form-item>
                <a-input placeholder="请输入任务信息、订单号信息或服务号信息" v-decorator="['name']" style="width: 200px;"/>
            </a-form-item>
            <a-form-item>
                <a-select
                    v-decorator="['type_id']"
                    placeholder="服务类型"
                    allowClear
                >
                    <a-select-option v-for="v in service_list" :key="v.id" :value="v.id">
                        {{v.name}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item>
                <a-select
                    v-decorator="['status']"
                    placeholder="任务状态"
                    allowClear
                >
                    <a-select-option v-for="(v,k) in status_list" :key="k" :value="k">
                        {{v}}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item :style="{flexGrow: 1}">
                    <a-button type="primary" html-type="submit" style="width: 100px;">
                        筛选
                    </a-button>
                </a-form-item>
        </a-form>

        <a-table :columns="task_columns" :dataSource="task_list" rowKey="id" :pagination="task_list_pagination" bordered>
            <template slot="task" slot-scope="record">
                <i v-if="record.is_urgent == '1'" style="color:#FF5151">{{record.order_name}}<p>{{record.sn}}</p></i>
                <i v-else>{{record.order_name}}<p>{{record.sn}}</p></i>
            </template>
             <template slot="msg" slot-scope="text, record">
                <p>{{record.msg || '暂无'}}</p>
            </template>
            <template slot="action" slot-scope="text, record">
                <router-link :to="'/task/update/'+record.id" v-if="menu_role.includes('/task/update')">
                    <a-badge v-if="record.had_push"  dot><img src="./../../assets/images/view.svg" alt=""></a-badge> 
                    <span v-else><img src="./../../assets/images/view.svg" alt=""></span>
                </router-link>
            </template>
        </a-table>
    </div>
</template>

<script>
    import moment from 'moment'
    export default {
        data(){
            return {
                current: 2,
                search: {},
                search_form: this.$form.createForm(this),
                service_list: [],

                task_list: [],
                task_columns: [
                    {title: '任务', scopedSlots: {customRender: 'task'}, align: 'center'},
                    {title: '服务号名称', dataIndex: 'service_name', align: 'center'},
                    {title: '最新进度', scopedSlots: {customRender: 'msg'}, align: 'center'},
                    {title: '所需积分', dataIndex: 'plan_amount', align: 'center'},
                    {title: '状态', dataIndex: 'status', align: 'center'},
                    {title: '操作', scopedSlots: {customRender: 'action'}, align: 'center'},
                ],
                task_list_pagination: {
                    current: 1,
                    total: 0,
                    pageSize: 10,
                    showQuickJumper: true,
                    onChange: (page, size) => {
                        //列表展示条数改变
                        this.handle_pagination_change(page, size)
                    },
                },

                service_list: [],
                status_list: []
            }
        },
        methods: {

            async get_task_list(){
                const { task_list_pagination, search } = this

                console.log(' --> search: ', search)

                let res = await this.http(
                    "get",
                    "task/index",
                    {
                        page: task_list_pagination.current,
                        page_size: task_list_pagination.pageSize,
                        ...search
                    }
                );
                this.task_list = (res && res.data) || []
                this.status_list = (res && res.statuses) || []
                this.task_list_pagination.total = (res && res.total_count) || 0;
            },
            
            async get_service_list(){
                let res = await this.http(
                    "get",
                    "inspection/index",
                    {
                        page: 1,
                        page_size: 100000
                    }
                );
                this.service_list = res.data || []
            },

            handle_search(){
                 this.search_form.validateFields((err, values) => {
                    if (!err) {
                        this.task_list_pagination.current = 1
                        if (values.created_at && values.created_at.length > 0) {
                            let startAt = moment(values.created_at[0]).format('YYYY年MM月DD日')
                            let endAt = moment(values.created_at[1]).format('YYYY年MM月DD日')
                            let startEndAt = startAt + '-' + endAt
                            values.created_at = startEndAt
                        } else {
                            values.created_at = undefined
                        }
                        this.search = values
                        this.get_task_list()
                    }
                })
            },
            handle_pagination_change(page, size){
                this.task_list_pagination.current = page
                this.task_list_pagination.pageSize = size
                this.get_task_list()
            }
        },
        mounted(){
            this.get_task_list()
            this.get_service_list()
        }
    }
</script>

<style lang='scss' scoped>

   
    /deep/ .ant-form-item{
        margin-right: 12px;
        .ant-select{
            width: 120px;
        }
    }
    

</style>